var utils = require('../../modules/utils');
var Resize = require('../Resize');
require('./index.css');

var Modal = function (opts) {
	this.width=opts.width||410;
	this.height=opts.height||190;
	this.top=opts.top;
	this.left=opts.left;
	this.right=opts.right;
	this.type=opts.type||'info';
	this.innerHTML=opts.innerHTML||'';
	this.mask=opts.mask;
	this.zIndex=opts.zIndex;
	this.delayAutoClose=opts.delayAutoClose;
	this.alwaysCenter=opts.alwaysCenter;        // 始终自适应居中
	this.yes=opts.yes;
	this.no=opts.no;
	this.yesText=opts.yesText;
	this.noText=opts.noText;
	this.onOK=opts.onOK;
	this.showTypeline=opts.showTypeline!==undefined?opts.showTypeline:true;
	this.onShow=opts.onShow;
	this.onClose=opts.onClose;
	this.autoDelete=opts.autoDelete;

	this.resize=opts.resize||{resizable:false};

	this.colors={
		info:'#5089fc',
		default:'#5089fc',
		success:'#00a854',
		error:'#f04134'
	}
	this.id=utils.rand();
	this.idyes=utils.rand();
	this.idno=utils.rand();

	this.layout();
};

Modal.prototype = {
	layout:function(){
		function innerBox(ths,w,h,top,left,right,zindex,mask,html,colors,type){
			var contStyle={
				width:w+'px',
				background:'#fff',
				zIndex:mask&&zindex?zindex+1:zindex||99999,
				left:left,
				top:top,
				right:right,
				boxShadow:'0 2px 8px rgba(0,0,0,.2)',
				borderRadius:'4px',
				overflow:'hidden'
			}
			if (ths.alwaysCenter) {
				contStyle.position='relative';
				contStyle.margin='0 auto';
				contStyle.display='inline-block';
				contStyle.verticalAlign='middle';
				contStyle.textAlign='left';
				contStyle.height=h+'px';
			}else{
				contStyle.height=h+'px';
				contStyle.position='absolute';
				contStyle.top=top;
				contStyle.left=left;
				if (!top) {
					contStyle.top='50%';
					contStyle.marginTop=-(h/2)+'px';
				}
				if (!left&&!right) {
					contStyle.left='50%';
					contStyle.marginLeft=-(w/2)+'px';
				}
			}
			
			if (mask) {
				if (utils.getAgrsType(mask)!=='object') {
					mask={
						opacity:0.3,
						background:'#000'
					}
				}
				mask.zIndex=zindex||998;
			}	
			ths.mask=mask;
			var maskCont=mask?'<div class="yss-layer-mask ease3" style="'+utils.cssTextify(mask)+'"></div>':'';
			var btns=((ths.yes||ths.no)?
				`<div class="yss-layer-alert-ft">
					${ths.yes?'<div id="'+ths.idyes+'" class="yss-layer-btns yss-layer-btns-yes fr ease3">'+(ths.yesText||'OK')+'</div>':''}
					${ths.no?'<div id="'+ths.idno+'" class="yss-layer-btns yss-layer-btns-no fr ease3">'+(ths.noText||'Cancel')+'</div>':''}
				</div>`:``);
			var resizebars=ths.resize.resizable?
							['<div class="yss-resize-bar yss-resize-1"></div>',
							'<div class="yss-resize-bar yss-resize-2"></div>',
							'<div class="yss-resize-bar yss-resize-3"></div>',
							'<div class="yss-resize-bar yss-resize-4"></div>',
							'<div class="yss-resize-line yss-resize-l1"></div>',
							'<div class="yss-resize-line yss-resize-l2"></div>',
							'<div class="yss-resize-line yss-resize-l3"></div>',
							'<div class="yss-resize-line yss-resize-l4"></div>']
							.join(''):
							'';
			var typeLine=ths.showTypeline?'<div class="yss-layer-line" style="'+utils.cssTextify({background:colors[type]})+'"></div>':'';
			var boxCont=ths.alwaysCenter?
						'<div class="yss-layer-wrap"><div class="yss-layer-content" style="'+utils.cssTextify(contStyle)+'">'+typeLine+html+btns+'</div></div>':
						'<div class="yss-layer-content" style="'+utils.cssTextify(contStyle)+'">'+typeLine+html+btns+resizebars+'</div>';
			return maskCont+boxCont;
		}
		var frag = document.createDocumentFragment();
		var box=document.createElement('div');
		box.id=this.id;
		box.style.display='none';
		box.className='yss-layer-box';
		box.innerHTML=innerBox(this,this.width,this.height,this.top,this.left,this.right,this.zIndex,this.mask,this.innerHTML,this.colors,this.type);
		frag.appendChild(box);
		document.body.appendChild(frag);
		
	},
	show:function(){
		var $this=this;
		var box=document.getElementById(this.id);
		utils.getClass(box,'yss-layer-mask',function(mask){
			mask.style.opacity=0;
		});
		box.style.display='block';
		setTimeout(function(){
			box.className='yss-layer-box yss-layer-show';
			utils.getClass(box,'yss-layer-mask',function(mask){
				mask.style.opacity=$this.mask.opacity||0.3;
			});
			if ($this.delayAutoClose>0) {
				$this.autoClose($this.delayAutoClose,$this.autoDelete);
			}
			var y=document.getElementById($this.idyes);
			var n=document.getElementById($this.idno);
			if (y) {
				utils.DOMEvent.add(y,'click',function(){
					if ($this.onOK) {
						$this.onOK.call($this);
					}else{
						$this.delete();
					}
				});
			}
			if (n) {
				utils.DOMEvent.add(n,'click',function(){
					if ($this.onClose) {
						$this.onClose.call($this);
					}else{
						$this.delete();
					}
				});
			}

			if ($this.resize.resizable) {
				$this.resize1().resize2().resize3().resize4().resize5().resize6().resize7().resize8();
			}
			
			$this.onShow&&$this.onShow(box);
		},1);
	},
	resize1:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-1'),
			tar:document.querySelector('.yss-resize-1').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mW=($this.resize.minWidth||380);
				var mH=($this.resize.minHeight||220);
				// if (pos.w>0) {
				var w=offset.width-pos.w;
				w=w<=mW?mW:w;
				var l=offset.width-w+offset.left;
				
				cont.style.width=w+'px';
				cont.style.left=l+'px';
				// }
				// if (pos.w>0) {
				var h=offset.height-pos.h;
				h=h<=mH?mH:h;
				var t=offset.height-h+offset.top;
				
				cont.style.height=h+'px';
				cont.style.top=t+'px';
				// }
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'nw',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize2:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-l1'),
			tar:document.querySelector('.yss-resize-l1').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mH=($this.resize.minHeight||220);
				// if (pos.w>0) {
				var h=offset.height-pos.h;
				h=h<=mH?mH:h;
				var t=offset.height-h+offset.top;
				
				cont.style.height=h+'px';
				cont.style.top=t+'px';
				// }
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'n',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize3:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-2'),
			tar:document.querySelector('.yss-resize-2').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mW=($this.resize.minWidth||380);
				var mH=($this.resize.minHeight||220);
				// if (pos.w>0) {
				var w=offset.width+pos.w;
				w=w<=mW?mW:w;
				
				cont.style.width=w+'px';
				// }
				// if (pos.w>0) {
				var h=offset.height-pos.h;
				h=h<=mH?mH:h;
				var t=offset.height-h+offset.top;
				
				cont.style.height=h+'px';
				cont.style.top=t+'px';
				// }
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'ne',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize4:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-l2'),
			tar:document.querySelector('.yss-resize-l2').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mW=($this.resize.minWidth||380);
				// if (pos.w>0) {
				var w=offset.width+pos.w;
				w=w<=mW?mW:w;
				
				cont.style.width=w+'px';
				// }
		
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'e',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize5:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-3'),
			tar:document.querySelector('.yss-resize-3').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mW=($this.resize.minWidth||380);
				var mH=($this.resize.minHeight||220);
				var w=offset.width+pos.w;
				w=w<=mW?mW:w;
				var h=offset.height+pos.h;
				h=h<=mH?mH:h;
				
				cont.style.height=h+'px';
				cont.style.width=w+'px';

				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'se',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize6:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-l3'),
			tar:document.querySelector('.yss-resize-l3').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mH=($this.resize.minHeight||220);
				// if (pos.w>0) {
				var h=offset.height+pos.h;
				h=h<=mH?mH:h;
				
				cont.style.height=h+'px';
				// }
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'s',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize7:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-4'),
			tar:document.querySelector('.yss-resize-4').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mH=($this.resize.minHeight||220);
				var h=offset.height+pos.h;
				h=h<=mH?mH:h;
				var mW=($this.resize.minWidth||380);
				var w=offset.width-pos.w;
				w=w<=mW?mW:w;
				var l=offset.left+(offset.width-w);
				cont.style.width=w+'px';
				cont.style.left=l+'px';
				cont.style.height=h+'px';
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'sw',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	resize8:function(){
		var $this=this;
		Resize({
			bar:document.querySelector('.yss-resize-l4'),
			tar:document.querySelector('.yss-resize-l4').parentNode,
			onResizing:function(pos,offset){
				var cont=this.tar;
				var mW=($this.resize.minWidth||380);
				var w=offset.width-pos.w;
				w=w<=mW?mW:w;
				var l=offset.left+(offset.width-w);
				cont.style.width=w+'px';
				cont.style.left=l+'px';
				$this.resize.onResizing&&$this.resize.onResizing.call(this,{
					type:'w',
					pos:pos,
					offset:offset
				});
			}
		});
		return this;
	},
	hide:function(){
		var box=document.getElementById(this.id);
		if (box) {
			box.style.display='none';
			box.className='yss-layer-box';
			this.onClose&&this.onClose(box);
		}
	},
	delete:function(){
		var box=document.getElementById(this.id);
		if (box) {
			document.body.removeChild(box);
			this.onDelete&&this.onDelete(box);
		}
	},
	autoClose:function(delay,del){
		var box=document.getElementById(this.id);
		var $this=this;
		utils.getClass(box,'yss-layer-line',function(line){
			if(!line.style['transition']){
				line.style['-webkit-transition']='all '+(delay/1000)+'s ease-out';
				line.style['-moz-transition']='all '+(delay/1000)+'s ease-out';
				line.style['-o-transition']='all '+(delay/1000)+'s ease-out';
				line.style['-ms-transition']='all '+(delay/1000)+'s ease-out';
				line.style['transition']='all '+(delay/1000)+'s ease-out';
			}
			setTimeout(function(){
				line.style.width=0;
				setTimeout(function(){
					$this.onClose&&$this.onClose();
					if (del) {
						$this.delete();
					}else{
						$this.hide();
					};
					line.style.width='100%';
				},delay);
			},1);
		});
	}
};

module.exports = Modal;
